<template>
    <div class="page">
        <van-nav-bar
            title="特享专区"
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="tabs">
            <div class="tab-item" :class="tab==0?'tab-itemactive':''" @click="changetab(0)">VIP专区</div>
            <div class="tab-item" :class="tab==1?'tab-itemactive':''" @click="changetab(1)">积分+现金</div>
            <div class="tab-item" :class="tab==2?'tab-itemactive':''" @click="changetab(2)">积分商城</div>
        </div>

        <!-- 积分+金钱购买页面 -->
        <div class="tabs-item" v-if="tab==1">
            <div class="banner"><img src="@/assets/banner2.png" alt="" @click="quQianDao()"></div>
            <div>
                <div class="myjifen" v-if="is_login">
                    <div class="huiyuanjifen-left">
                        <img :src="userInfo.head_ico" alt="">
                        <span>VIP会员</span>
                    </div>
                    <div class="huiyuanjifen-right">
                        <span>{{}}</span>
                        <span>积分</span>
                    </div>
                </div>
                <div class="myjifen"  v-else>
                    <span style="font-size:0.28rem;">我的积分/开店等级</span>
                    <van-button plain type="danger" class="dengluchakan" @click="tologin">登录查看</van-button>
                </div>
            </div>
            <div class="tuijian"><span>推荐商品</span></div>
            <div class="content">
                <div class="product"  v-for="item in dataList" :key="item.id">
                    <img :src="item.img">
                    <p class="product-title">{{item.name}}</p>
                    <div class="product-tip">
                        <span>已售{{item.sale}}件</span>
                        <span>积分抵扣0%</span>
                    </div>
                    <div class="product-bottom">
                        <span>￥{{item.market_price}}</span>
                        <span>￥{{item.sell_price}}</span>
                    </div>
                </div>
            </div>   
            <div class="fenlei">
                <div class="fenlei-left">
                    <span @click="fenlei(0)" :class="tabfenlei==0?'tabfenleictive':''">全部</span>
                    <span @click="fenlei(1)" :class="tabfenlei==1?'tabfenleictive':''">服装</span>
                    <span @click="fenlei(2)" :class="tabfenlei==2?'tabfenleictive':''">数码</span>
                    <span @click="fenlei(3)" :class="tabfenlei==3?'tabfenleictive':''">水果</span>
                </div>
                <div class="fenlei-left">
                    <span>筛选</span>
                     <van-icon name="filter-o" />
                </div>
            </div>  
            <div class="content">
                <div class="product"  v-for="item in dataList" :key="item.id">
                    <img :src="item.img">
                    <p class="product-title">{{item.name}}</p>
                    <div class="product-tip">
                        <span>已售{{item.sale}}件</span>
                        <span>积分抵扣0%</span>
                    </div>
                    <div class="product-bottom">
                        <span>￥{{item.market_price}}</span>
                        <span>￥{{item.sell_price}}</span>
                    </div>
                </div>
            </div> 
        </div>
        <!-- 积分+金钱购买页面结束 -->

        <!-- 积分兑换页面开始 -->
        <div class="tabs-item" v-if="tab==2">
            <div class="goumai">
                <img src="@/assets/微信.png" alt="">
                <p>XXXX:Wasssddr：宝贝很好，老婆很满意，值得购jlkjlkjkljkljkljkl</p>
            </div>
            <div class="banner"><img src="@/assets/banner2.png" alt=""></div>
            <div>
                <div class="my-duihuan">
                    <div class="my-duihuan-left" v-if="is_login">
                        <img :src="userInfo.head_ico" alt="" style="width: 0.6rem;height: 0.6rem;">
                        <div class="jifenshuliang">
                            <p class="jifenshuliang1">
                                <span>121212</span>
                                <span>积分</span>
                            </p>
                            <p>VIP会员</p>
                        </div>
                    </div>
                    <div class="my-duihuan-left" v-else>
                        <span>我的积分/开店等级</span>
                        <van-button plain type="danger" class="dengluchakan">登录查看</van-button>
                    </div>
                    
                    <div class="my-duihuan-right" @click="goTODuiHuan()">
                        <van-icon name="replay" class="my-duihuan-right-icon" />
                        <p>兑换记录</p>
                    </div>
                </div>
            </div>
            <div class="duihuancontent">
                <p class="duihuancontent-tuijian">推荐商品</p>
                <div class="duihuanshangpin-all">
                    <div class="duihuanshangpin" v-for="(item, index) in integralShareList"  @click="goToGoods(item, index)">
                        <div class="duihuanshangpin-img"><img :src="item.img" alt=""></div>
                        <p>{{item.name}} </p>
                        <div class="duihuanshangpin-bottom">
                            <span>{{item.spend_point}}积分</span>
                            <span>{{item.sale}}人兑换</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fenlei" style="background:white">
                <div class="fenlei-left">
                    <span @click="duihuantab(item, index)" :class=" duihuan == index ? 'tabfenleictive' : '' "
                      v-for="(item, index) in integralClassList4">{{item.name}}</span>
                </div>
                <div class="fenlei-right" :class="showIntegralClass ? 'i-c-bg' : ''" @click="showIntegralClassList()">
                  <span>筛选</span>
                  <van-icon name="filter-o"/>
                </div>
            </div>
            <div class="duihuancontent">
                <div class="duihuanshangpin-all">
                    <div class="duihuanshangpin" v-for="(item, index) in integralList" @click="goToGoods(item, index)">
                        <div class="duihuanshangpin-img"><img :src="item.img" alt=""></div>
                        <p>{{item.name}}</p>
                        <div class="duihuanshangpin-bottom">
                          <span>{{item.spend_point}}积分</span>
                          <span>{{item.sale}}人兑换</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 这是选择分类 绝对定位 -->
        <div v-if="showIntegralClass" class="integral-class">
          <span v-for="(item, index) in integralClassList" @click="duihuantab(item, index)"
            :class=" duihuan == index ? 'tabfenleictive' : '' ">
            {{item.name}}
          </span>
        </div>
        <!-- 积分兑换页面结束 -->
    </div>
</template>
<script>
import request from '../utils/request.js'

export default {
    data(){
        return{
            tab:2,
            tabfenlei:0,//积分分类
            duihuan:0,//兑换分类
            is_login:false,//是否登录
            dataList:[],//商品列表
            integralClassList4: [
              {id:1,name:'全部'},
              {id:2,name:'服装'},
              {id:3,name:'数码'},
              {id:4,name:'水果'},
            ],
            integralClassList:[
              {id:1,name:'全部'},
              {id:2,name:'服装'},
              {id:3,name:'数码'},
              {id:4,name:'水果'},
              {id:4,name:'水果'},
              {id:4,name:'水果'},
              {id:4,name:'水果'}
            ],
            showIntegralClass: false,
            integralShareList: [], // 积分推荐列表
            integralList:[], // 纯积分列表
        }
    },
    methods:{
        // 切换tab
        changetab(index){
            this.tab = index
        },
        // 积分加现金的小分类
        fenlei(index){
            this.tabfenlei = index
        },
        // 切换积分兑换的小分类
        duihuantab(item, index){
          this.duihuan = index
          this.getIntegralList()
        },
        // 返回上页
        onClickLeft(){
            this.$router.go(-1);
        },
        tologin(){
            this.$router.push({"name":"login"})
        },
        quQianDao(){
          window.location.href="http://app.ztsx123.com/1/#/qiandao"
        },

        // 获取纯积分兑换的方法
        getIntegralList(){
          request({
            url: `?controller=theapi&action=costpoint`,
            method: 'get',
            params: {}
          }).then(res=>{
            console.log(res)
            this.integralList = res.data
          })
        },
        // 获取纯积分推荐的方法
        getIntegralShareList(){
          request({
            url: `?controller=theapi&action=costpoint`,
            method: 'get',
            params: {}
          }).then(res=>{
            this.integralShareList = res.data
          })
        },
        // 显示积分兑换的分类选择
        showIntegralClassList(){
          if(this.showIntegralClass){
            this.showIntegralClass = false
            return
          }
          this.showIntegralClass = true
        },
        // 去商品详情
        goToGoods(item, index){
          this.$router.push({
            name: 'integerGoodDetails',
            params: {
              id: item.id
            }
          })
        },
        // 去兑换记录
        goTODuiHuan(){
          this.$router.push({
            name: 'duihuanjilu'
          })
        }
    },
    mounted(){
      this.request({
        url: '?controller=theapi&action=goods_list',
        params:{
            keywords:1
        }
      }).then(res=>{
        this.dataList=res.data.data
      })
      // 判断是否登录
      this.request({
        url: '?controller=theapi&action=userinfo',
        method: 'get', 
      }).then(res=>{
        this.userInfo=res.data.data;
        if(res.data.data.user_id){
            this.is_login=true
        }else{
            this.is_login=false
        }
      }),
      this.getIntegralShareList()
      this.getIntegralList()
    }
}
</script>
<style scoped>
    .page>>> .van-nav-bar .van-icon{color: black;}
    .tabs{display: flex;height: 1rem;line-height: 1rem;border-bottom: 1px solid #e6e6e6}
    .tab-item{flex: 1;text-align: center;font-size: 0.3rem}
    .tab-itemactive{border-bottom:1px solid #f57397}
    .content{display: flex;justify-content: space-between;padding: 0.2rem;background: #F5F6F7;flex-wrap: wrap}
    .product{width: 3.5rem;background: white;padding-bottom:0.2rem; margin-bottom: 0.2rem;}
    .product img{width: 100%;height: 2.5rem;}
    .product-title{margin-top: 0.2rem;font-size: 0.3rem;padding: 0 0.2rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
    .product-tip{display: flex;justify-content: space-between;font-size: 0.25rem;margin-top: 0.2rem;padding: 0 0.2rem;align-items: center;}
    .product-tip span:nth-child(2){border: 1px solid #f54375;padding: 0.05rem;border-radius: 0.2rem;color: #f54375}
    .product-bottom{display: flex;font-size: 0.25rem;margin-top: 0.2rem;padding: 0 0.2rem;align-items: center;}
    .product-bottom span:nth-child(1){font-size: 0.3rem;color: #f54375;font-weight: bold;}
    .product-bottom span:nth-child(2){margin-left: 0.2rem;color: #ccc;text-decoration:line-through ;}
    .banner img{width: 100%}
    .myjifen{height: 1.05rem;display: flex;align-items: center;justify-content: space-between;padding: 0 0.45rem;}
    .dengluchakan{height: 0.6rem;line-height: 0.6rem; border-radius: 0.1rem;}
    .huiyuanjifen-left{display: flex;align-items: center;}
    .huiyuanjifen-left img{width: 0.6rem;height: 0.6rem; border-radius: 50%;}
    .huiyuanjifen-left span{font-size: 0.28rem;margin-left: 0.3rem;}
    .huiyuanjifen-right{font-size: 0.28rem;}
    .huiyuanjifen-right span:nth-child(1){color: #F52E67;font-weight: bold;}
    .tuijian{padding: 0.2rem;background: #F5F6F7}
    .tuijian span{font-size: 0.4rem;font-weight: bold;border-left:3px solid #F52E67 ;    padding-left: 0.2rem;}
    .fenlei{background: #F5F6F7;font-size: 0.28rem;display: flex;justify-content: space-between; border-top: 0.01rem solid #EFF1F3;}
    .fenlei-left span{padding: 0 0.2rem;}
    .tabfenleictive{color: #F52E67}
    .goumai{height: 1rem;padding: 0 0.25rem;display: flex;align-items: center;}
    .goumai p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;    margin-left: 0.2rem;}
    .goumai img{    width: 0.5rem;height: 0.5rem;}
    .my-duihuan{height: 1.6rem;display: flex;align-items: center;padding: 0 0.5rem;justify-content: space-between;}
    .my-duihuan-left{ width: 5rem;border-right: 1px solid #e6e6e6;display: flex;}
    .my-duihuan-right{text-align: center;font-size: 0.28rem;}
    .my-duihuan-right-icon{font-size: 0.45rem;color: #F52E67}
    .duihuanshangpin-all{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0.38rem 0.38rem 0 0.38rem;}
    .duihuanshangpin{width: 3.02rem;font-size: 0.28rem;margin-bottom: 0.5rem;}
    .duihuanshangpin-img{width: 2.28rem;height: 2.28rem;display: block;margin: auto;border: 1px solid #e6e6e6;display: flex;justify-content: center;align-items: center}
    .duihuanshangpin-img img{width: 2rem;height: 2rem;}
    .duihuanshangpin p{margin-top: 0.2rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
    .duihuanshangpin-bottom{margin-top: 0.2rem;display: flex;}
    .duihuanshangpin-bottom span{flex: 1}
    .duihuanshangpin-bottom span:nth-child(1){color: #F52E67;}
    .duihuancontent-tuijian{font-size: 0.32rem;font-weight: bold;margin: 0 0.2rem;padding-left:0.2rem;border-left:3px solid #F52E67  }
    .duihuanshangpin-bottom span:nth-child(2){text-align: right;border-left: 1px solid #e6e6e6}
    .fenlei-left{padding: 0.2rem 0.2rem;}
    .fenlei-right{display: flex;align-items: center; padding: 0.2rem 0.2rem; border-radius: 0.2rem;}
    .jifenshuliang{margin-left: 0.2rem;font-size: 0.25rem;}
    .jifenshuliang1 span:nth-child(1){color: #F52E67}
    .integral-class{
      position: absolute;
      padding: 0.2rem;
      width: 60%;
      top: 12.05rem;
      right: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      background: rgb(245, 245, 245);
      border-radius: 0.2rem;
    }
    .integral-class span{
      margin: 0.2rem;
      padding: 0.1rem 0.2rem;
      border: 1px solid #DDE1E3;
      border-radius: 0.1rem;
    }
    .i-c-bg{
      background: rgb(245, 245, 245);
    }
</style>


